import React, { useState, useEffect } from 'react'
import '../../scss/lwl/detail.css'
import { useSearchParams } from 'react-router-dom'
import { Swiper } from 'react-vant';
import { items } from './Swiper';
import { Grid, Button, Toast } from 'react-vant'
import axios from 'axios'
import { Location, ClockO, ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
export default function Lwl_Detial() {
    const jump = useNavigate()
    const [params] = useSearchParams()
    const id = params.get('id')
    const [arr, setArr] = useState([])
    const [landlord, setLord] = useState([])
    const getData = async () => {
        let { data: { house } } = await axios.get('http://localhost:3000/house')
        setArr(house)
    }
    const getLord = async () => {
        let { data: { landlord } } = await axios.get('http://localhost:3000/landlord')
        setLord(landlord)
    }
    useEffect(() => {
        getData()
        getLord()
        getAnswer()
        getQuestion()
    }, [])
    const golandlord = (id) => {
        jump(`/landlord?id=${id}`)
    }
    const [answer, setAns] = useState([])
    const getAnswer = async () => {
        let { data: { answer } } = await axios.get('http://localhost:3000/answer')
        setAns(answer)
    }
    const [question, setQuestion] = useState([])
    const getQuestion = async () => {
        let { data: { question } } = await axios.get('http://localhost:3000/question')
        setQuestion(question)
    }
    const [uid,setUid]=useState('665db2daf793db849f33b899')
    const upCollect = async (item) => {  
        item.uid = uid
        // console.log(item,111)
        item.houseid=item._id
        console.log(item._id)
        console.log(item.houseid)
        await axios.post('http://localhost:3000/upcollect',item)
        getData()
    }
    return (
        <div id='detail_body'>
            <div id="nav_bar">
                <ArrowLeft fontSize={30} color={'white'} onClick={() => { jump(-1) }} />
            </div>
            <div className="demo-swiper">
                <Swiper autoplay={5000}>{items}</Swiper>
            </div>
            <div id="detail_info">
                {arr.filter(item => item._id === id).map(item => (
                    <>
                        <div className='bt'>
                            <h2>{item.classfy}|实图真价&emsp;{item.name}&emsp;精装房间&emsp;房东好说话</h2>
                            <br />
                            <p>
                                <span style={{ fontSize: '20px', fontWeight: 'bold', color: '#f57c00' }}>{item.price}</span><span style={{ color: '#f57c00' }}>元/月</span>&emsp;<span>押二付一</span>
                                <span style={{ float: 'right' }} onClick={() => {upCollect(item)}}>
                                    {item.is_collect?(<span style={{color:'gold',fontSize:'18px'}}>★已收藏</span>):(<span style={{fontSize:'18px'}}>☆收藏</span>)}</span>
                            </p>

                        </div>

                        <div>
                            <Grid>
                                <Grid.Item text={<div style={{ textAlign: 'center' }}><span>{item.house_type + '1厅1卫'}</span><br></br><span>房型</span></div>} />
                                <Grid.Item text={<div style={{ textAlign: 'center' }}><span>{item.house_area + '㎡'}</span><br></br><span>面积</span></div>} />
                                <Grid.Item text={<div style={{ textAlign: 'center' }}><span>{'中/' + item.house_floor + '层'}</span><br></br><span>楼层</span></div>} />
                                <Grid.Item text={<div style={{ textAlign: 'center' }}><span>{item.house_direction}</span><br></br><span>朝向</span></div>} />
                            </Grid>
                        </div>


                        <div style={{ marginTop: '20px' }} className='tip'>
                            {item.tip.map(ele => (
                                <span onClick={()=>{jump(`/around`)}} style={{ border: '1px solid #cecece', color: '#blue', marginLeft: '10px', background: '#f7f7f7', }}>{ele + '>'}<br></br></span>
                            ))}
                        </div>

                        <div className='jfbd'>
                            <h2>看房必读</h2>
                            <p><span>看房时间</span>:<span style={{ fontWeight: 'bold' }}>随时看房</span>
                                <span style={{ float: 'right' }} onClick={() => Toast.info('跳转到预约页面')}>预约看房{'>'}</span>
                            </p>
                        </div>

                        <div className='fwjs'>
                            <h2>房屋介绍</h2>
                            <span style={{ fontSize: '16px', lineHeight: '2em' }}>
                                小区位于深圳市福田区岗厦片区,岗厦莅临深圳CBD东面,介于深南路以南、皇岗路以西、金田路以东、滨河路以北的区域,片区占地约2.76平方,片区内各项生活配套应有尽有,购物:卓悦、zhognxincheng、购物公园等学校:岗厦小学、天祥小学、福华小学、莲花中学南校区。<br></br>
                                1、地铁枢纽,6条地铁线路汇聚于此,快速通达全城。<br></br>2、楼层好,南向,采光通风良好,视野开阔。<br></br>3、居家靓装,保养很好,全齐家私电器,拎包入住。<br></br>4、业主为人和善,价钱好商量,急寻有缘租户长期居<br></br>
                                附近还有众多小区选择:岗厦城,深圳天元,润恒大厦,恒运豪庭,辛诚花园,港丽豪园,万景花园,华景花园,东华大厦,华景大厦,皇洲花园,彩福大厦,星河世纪,嘉麟豪庭,福岗园,大中华金融中心,东方新天地广场,彩天名苑,彩虹新都,福鑫苑,高科利花园,深大新村,福华新村,城中雅苑,星河国际,中海华庭,发展兴苑。
                            </span>
                        </div>

                        <div className="map">
                            <h2>地图位置</h2>
                            <p style={{ fontSize: '16px', textAlign: 'center', marginTop: '20px' }}><Location color='tomato' /><span onClick={() => Toast.info('跳转到地图导航')}>位于福田·福港园大厦 距离最近地铁站步行6分钟…{'>'}</span></p>
                            <div className='mapImg'>这是地图导航……</div>
                        </div>

                        <div className="landlord">
                            {landlord.filter(p => p._id === params.get('lid')).map(item => (
                                <div className='landlord_info'>
                                    <div className="landlord_head">
                                        <img src="./酒店7.webp" alt="" />
                                    </div>
                                    <div className="landlord_name">
                                        <h2>{item.name}</h2>
                                        <p><span>业主本人</span> <span>已实名</span></p>
                                    </div>
                                    <div className="landlord_info">
                                        <button onClick={() => { golandlord(item._id) }}>详情{'>'}</button>
                                    </div>
                                </div>
                            ))}

                            <Grid>
                                <Grid.Item text={<div style={{ textAlign: 'center' }}><span>70</span><br></br><span>信用良好</span></div>} />
                                <Grid.Item text={<div style={{ textAlign: 'center' }}><span>100%</span><br></br><span>微聊回复率</span></div>} />
                                <Grid.Item text={<div style={{ textAlign: 'center' }}><span>1小时</span><br></br><span>回复时长</span></div>} />
                                <Grid.Item text={<div style={{ textAlign: 'center' }}><span>50%</span><br></br><span>电话响应率</span></div>} />
                            </Grid>
                        </div>

                        <div className="wenda">
                            <p><span>小区问答</span><button onClick={() => Toast.info('跳转到问答页面')}>我要提问</button></p>
                            <div className='wenda_con'>
                                {question.slice(-1).map(item => (
                                    <>
                                        <div id='everyAnsList' key={item._id}>
                                            <div className="reSay">
                                                <button style={{width:'20px',height:'20px',background:'tomato',border:'none',marginTop:'10px'}}>问</button>
                                                <div className="ques">{item.question}</div>
                                            </div>
                                            {answer.slice(-1).map(ele => (
                                                <>
                                                    <div key={ele._id} className='anslist'>
                                                        <div className="qphoto1">
                                                            <img src="./aaa5.png" alt="" />
                                                            <span className='anstip'>答</span>
                                                        </div>
                                                        <div className="ques">{ele.answer}</div>
                                                    </div>
                                                    <Button style={{width:'100%'}} onClick={()=>{jump('/answer')}}>查看全部({answer.length})</Button>
                                                </>
                                                
                                            ))}
                                        </div>
                                    </>
                                ))}
                                
                            </div>
                        </div>

                        <div className="view">
                            <div className='view_icon' onClick={() => {jump('/booking_add',{state:{item}})}}><ClockO fontSize={25} /><br></br><span>预约看房</span></div>
                            <Button type='warning'>微聊</Button>
                            <Button type='danger'>电话</Button>
                        </div>
                    </>
                ))}
            </div>
        </div>
    )
}
